<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <title>Set States</title>
    <style>
      .g6-tooltip {
        border: 1px solid #e2e2e2;
        border-radius: 4px;
        font-size: 12px;
        color: #545454;
        background-color: rgba(255, 255, 255, 0.9);
        padding: 10px 8px;
        box-shadow: rgb(174, 174, 174) 0px 0px 10px;
      }
    </style>
  </head>
  
  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script src="../build/minimap.js"></script>
    <script src="./assets/d3-4.13.0.min.js"></script>
    <script src="./assets/jquery-3.2.1.min.js"></script>
    <script>
      const minimap = new Minimap({
        size: [ 200, 160 ]
      });
      const graph = new G6.Graph({
        container: 'mountNode',
        width: 1000,
        height: 800,
        autoPaint: false,
        plugins: [ minimap ],
        modes: {
          default: ['drag-canvas', {
            type: 'tooltip',
            formatText: model => {
              return model.name
            }
          },
          {
            type: 'edge-tooltip',
            formatText: (model, e) => {
              const edge = e.item;
              return '来源：' + edge.getSource().getModel().name + '<br/>去向：' + edge.getTarget().getModel().name;
            }
          },
          {
            type: 'activate-relations',
            activeState: 'highlight',
            inactiveState: 'dark'
          }]
        },
        defaultNode: {
          size: [10, 10],
          color: 'steelblue',
          style: {
            lineWidth: 2,
            fill: '#fff',
            opacity: 0.8
          }
        },
        defaultEdge: {
          size: 1,
          style: {
            stroke: '#e2e2e2',
            lineAppendWidth: 2
          }
        },
        nodeStateStyle: {
          highlight: {
            opacity: 1
          },
          dark: {
            opacity: 0.2
          }
        },
        edgeStateStyles: {
          highlight: {
            stroke: '#999'
          }
        }
      });
      $.getJSON('./assets/data/xiaomi.json', data => {
        graph.data({
          nodes: data.nodes,
          edges: data.edges.map((edge, i) => {
            edge.id = 'edge' + i;
            return Object.assign({},
            edge);
          })
        });
        const simulation = d3.forceSimulation().force("link", d3.forceLink().id(function(d) {
          return d.id;
        }).strength(0.5)).force("charge", d3.forceManyBody()).force("center", d3.forceCenter(500, 300));
        simulation.nodes(data.nodes).on("tick", ticked);
        simulation.force("link").links(data.edges);

        graph.render();

        function ticked() {
          graph.refreshPositions();
          graph.paint();
        }
      });
    </script>
  </body>

</html>